<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<script type="text/javascript" src="js/tablesorter/jquery.tablesorter.js"></script>
	<script type="text/javascript" src="js/tablesorter/jquery.tablesorter.pager.js"></script>
	<script type="text/javascript" src="js/jquery.form.js"></script>
	<script type="text/javascript" src="js/ui/jquery.ui.core.js"></script>
	<script type="text/javascript" src="js/ui/jquery.ui.effect.js"></script>
	<script type="text/javascript" src="js/ui/jquery.ui.effect-clip.js"></script>
	<script type="text/javascript" src="js/ui/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="js/ui/jquery.ui.tabs.js"></script>
	<script type="text/javascript" src="js/ui/jquery.ui.position.js"></script>
	<script type="text/javascript" src="js/ui/jquery.ui.dialog.js"></script>
	<script type="text/javascript" src="js/ui/jquery.ui.tooltip.js"></script>
	<script type="text/javascript" src="js/ui/jquery.ui.datepicker.js"></script>
	<script type="text/javascript" src="js/ui/jquery.ui.progressbar.js"></script>
	<script type="text/javascript" src="js/jefra.validate.js"></script >
	<script type="text/javascript" src="js/jefra.message.js"></script >
	<script type="text/javascript" src="js/jefra.util.js"></script >
	<script type="text/javascript" src="js/jsp/UsuarioForm.js"></script>
<title>Insert title here</title>
</head>
<body>
	<h1>USUARIOS</h1>
	<div id="divBuscar">
		<table>
				<tr>
					<td>Criterio</td>
					<td colspan="2">Texto</td>
				</tr>
				
				<tr>
					<td>
						<select id="sltCriterio">
						<option value="USU.USUUSUARIO_V">USUARIO</option>
						<option value="ROL.ROLNOMBRE_V">ROL</option>
						<option value="PER.PERNOMBRES_V">NOMBRES</option>
						<option value="PER.PERPATERNO_V">APE. PATERNO</option>
						<option value="PER.PERMATERNO_V">APE. MATERNO</option>
						<option value="PER.PERDNI_V">DNI</option>
						</select>
					</td>
					<td><input type="text" id="txtTexto" /></td>
					<td><input type="button" id="btnBuscar" value="Buscar"/></td>
				</tr>
				<tr>
					<td colspan="3" align="center">Estado:
						<input type="radio" name="rdEstado" value="1" checked="checked"/>Activos
						<input type="radio" name="rdEstado" value="0"/>Inactivos
						<input type="radio" name="rdEstado" value=""/>Todos
					</td>
				</tr>
		</table>
	</div>
	
	<div id="divLista">
		<table align="center" class="tablesorter" id="tblLista"></table>
	</div>
		
	<div id="pager" class="pager">
		<form>
			<img src="js/tablesorter/addons/pager/icons/first.png" class="first">
			<img src="js/tablesorter/addons/pager/icons/prev.png" class="prev">
			<input type="text" class="pagedisplay">
			<img src="js/tablesorter/addons/pager/icons/next.png" class="next">
			<select class="pagesize">
				<option selected="selected" value="10">10</option>
				<option value="20">20</option>
				<option value="30">30</option>
				<option value="40">40</option>
			</select>
			<img src="js/tablesorter/addons/pager/icons/last.png" class="last">
		</form>
	</div>
			
	<h4 align="center">
		<img id="btnNuevo" alt="Nuevo" src="images/new.png"/>
	</h4>	
	
	
	<div id="divFormulario">
		<input type="hidden" id="txtIdUsuario"/>
		<input type="hidden" id="txtIdPersona"/>
		<input type="hidden" id="txtIdRol"/>
  		<div id="divElemento">
	  		<fieldset>
				<legend>Datos del Usuario</legend>
			    <table width="700" border="0" id="tblFormulario">
			      <tr>
			        <td>Usuario</td>
			        <td><input type="text" id="txtUsuario" maxlength="45" class="requiredText" tabindex="1"/><img src="" id="imgExisteUsuario"/><br/>
			        	<label id="txtExisteUsuario"></label>
			        </td>
			        <td>Correo</td>
			        <td><input type="text" id="txtCorreo" maxlength="45" class="requiredEmail" tabindex="10"/></td>
			      </tr>
			      <tr>
			        <td>Rol</td>
			        <td><select id="sltRol" class="requiredSelect" tabindex="2">
				        	<c:forEach items="${rol}" var="rol">
								<option value="${rol.rolcodigoI}">
									<c:out value="${rol.rolnombreV}"/>
								</option>
							</c:forEach>
						</select>
					</td>
			        <td>Domicilio</td>
			        <td><input type="text" id="txtDomicilio" maxlength="150" class="requiredText" tabindex="11"/></td>
			      </tr>
			      <tr>
			        <td>Nombres</td>
			        <td><input type="text" id="txtNombres" maxlength="45" class="requiredText" tabindex="3"/></td>
			        <td>Departamento</td>
			        <td><select id="sltDepartamento" class="requiredSelect" tabindex="12">
				        	<c:forEach items="${departamento}" var="departamento">
								<option value="${departamento.ubicodigoV}">
									<c:out value="${departamento.ubinombreV}"/>
								</option>
							</c:forEach>
						</select>
					</td>
			      </tr>
			      <tr>
			        <td>Ape. Paterno</td>
			        <td><input type="text" id="txtPaterno" maxlength="45" class="requiredText" tabindex="4"/></td>
			        <td>Provincia</td>
			        <td><select id="sltProvincia" class="requiredSelect" tabindex="13">
							<option value="">Seleccione</option>
						</select>
					</td>
			      </tr>
			      <tr>
			        <td>Ape. Materno</td>
			        <td><input type="text" id="txtMaterno" maxlength="45" class="requiredText" tabindex="5"/></td>
			        <td>Distrito</td>
			        <td><select id="sltDistrito" class="requiredSelect" tabindex="14">
							<option value="">Seleccione</option>
						</select></td>
			      </tr>
			      <tr>
			        <td>DNI</td>
			        <td><input type="text" id="txtDni" maxlength="8" class="requiredNumber" tabindex="6"/></td>
			        <td>Cel. Movistar</td>
			        <td><input type="text" id="txtMovistar" maxlength="15" class="required" tabindex="15"/></td>
			      </tr>
			      <tr>
			        <td>Nacimiento</td>
			        <td><input type="text" id="dtNacimiento" class="requiredDate" tabindex="7"/></td>
			        <td>Cel. Claro</td>
			        <td><input type="text" id="txtClaro" maxlength="15" class="required" tabindex="16"/></td>
			      </tr>
			      <tr>
			        <td>Estado Civil</td>
			        <td>
						<select id="sltEstadoCivil" class="requiredSelect" tabindex="8">
							<option value="S">SOLTERO</option>
							<option value="C">CASADO</option>
							<option value="T">CONVIVIENTE</option>
							<option value="V">VIUDO</option>
							<option value="D">DIVORCIADO</option>
						</select>
					</td>
			        <td>Cel. Nextel</td>
			        <td><input type="text" id="txtNextel" maxlength="15" class="required" tabindex="17"/></td>
			      </tr>
			      <tr>
			        <td>Sexo</td>
			        <td>
						<select id="sltSexo" class="requiredSelect" tabindex="9">
							<option value="M">MASCULINO</option>
							<option value="F">FEMENINO</option>
						</select>
					</td>
			        <td>Tel. Fijo</td>
			        <td><input type="text" id="txtTelefono" maxlength="15" class="requiredPhone" tabindex="18"/></td>
			      </tr>
			    </table>
		    </fieldset>
	  	</div>
	  
	  	<div id="divFoto">
			<fieldset>
				<legend>Foto</legend>
				<img alt="Foto" src="images/no_disponible.jpg" class="imgFoto" id="imgFoto">
				<br/>
				<form action="#" method="POST" enctype="multipart/form-data" accept-charset="utf-8" class="formFoto">
					<input type="file" name="fileFoto" class="fileFoto" tabindex="19"/>
					<input type="submit" value="Enviar"/>
				</form>
				<div id="progressFoto"></div>
			</fieldset>
		</div>  
	  
  		<div id="divBoton">
			<input type="button" id="btnProcesar" value="Procesar" tabindex="20"/>
			<input type="button" id="btnCancelar" value="Cancelar" tabindex="21"/>
		</div>
</div>
</body>
</html>